<template>
<van-list  @load="onKerwinLoad"
        v-model="loading"
      :finished="finished"
      :immediate-check="false"
      finished-text="我是有底线的"

    >
        <van-cell id="boxping" v-if="imagecom.length">
        <van-panel v-if="pingcom != null">
                <template #header>
                    <div class="shpja">
                        <div class="shpjaa">商品评价</div>
                        <div class="shpjxa">
                            <div><van-icon name="arrow-left" size="24" color="#ccc" @click="comfoo()"/>商品评价({{pingcom.totalCount}})</div>
                            <div class="manyia">满意度 <span>{{pingcom.satisfaction}}%</span></div>
                        </div>
                    </div>
                </template>
            </van-panel>
            <div class="tous" v-for="(item,index) in imagecom" :key="index">
                <div class="touxianga">
                       <div class="touaa">
                           <img src="">
                       </div>
                       <div class="touba">
                           <p>{{item.nickName}}</p>
                           <p><van-rate v-model="item.productScore" :count="item.productScore" size="14" gutter="2"/><span>{{item.commentTime}}{{item.skuName}}</span></p>
                           <p>{{item.content}}</p>
                           <div class="tupians" v-if="item.imageList.length">
                               <div v-for="(data,index) in item.imageList" :key="index">
                                   <img :src="data" @click="imgcom(index,item.imageList)" v-lazy="data">
                               </div>
                           </div>
                       </div>
                </div>
            </div>
           </van-cell>
    </van-list>
</template>
<script>
import Vue from 'vue'
import { mapMutations } from 'vuex'
import { Panel, Icon, Rate, ImagePreview, Lazyload, List, Cell } from 'vant'
import http from '@/util/http'
Vue.use(Panel).use(Icon).use(Rate).use(Lazyload).use(List).use(Cell)
export default {
  data () {
    return {
      value: 0,
      pingcom: null,
      imagecom: [],
      loading: false,
      finished: false,
      current: 1, // 记录当前页数
      total: 0
    }
  },
  methods: {
    onKerwinLoad () {
      // console.log("到底了",this.datalist.length,this.total)
      if (this.imagecom.length === 0) {
        this.loading = false
        return
      }
      if (this.imagecom.length === this.total) {
        this.finished = true// 请求结束，禁用懒加载
        return
      }

      this.current++
      http({
        url: `/heihei/api/comment/list?c=h5&s=20000&t=1605318671165&v=1.0&productId=${this.$route.query.id}&pn=${this.current}&ps=10`
      }).then(res => {
        this.imagecom = [...this.imagecom, ...res.data.data.pageList]
        // loading改会false
        this.loading = false
      })
    },
    ...mapMutations(['hideAsides', 'showAsides']),
    comfoo () {
      this.$router.back()
    },
    imgcom (index, data) {
      ImagePreview({ images: data, startPosition: index })
    }
  },
  mounted () {
    this.hideAsides()
    http({
      url: `/heihei/api/comment/list?c=h5&s=20000&t=1605318671165&v=1.0&productId=${this.$route.query.id}&pn=${this.current}&ps=10`
    }).then(res => {
      this.pingcom = res.data.data
      this.imagecom = res.data.data.pageList
      this.total = res.data.data.totalCount
    })
  },
  destroyed () {
    this.showAsides()
  }
}
</script>
<style lang="scss" scoped>
        #boxping{
            padding-top:94px;
        }
        .van-panel{
             padding: 0 10px;
             position: fixed;
             top: 0;
             left: 0;
             right: 0;
             z-index: 88;
             .shpja{
                 height: 94px;
                 line-height: 45px;
                 border-bottom: 1px solid #ccc;
                 .shpjaa{
                     text-align: center;
                    }
            .shpjxa{
                display: flex;
                 div{
                     flex: 1;
                     font-size: 14px;
                     span{
                         color: #ea413c;
                         font-size: 14px;
                     }
                     .van-icon{
                         position: absolute;
                         top: 10px;
                     }
                 }

                 .manyia{
                     text-align: right;
                     position: relative;
                 }
                 }
             }
         }
        .tous{
            padding: 10px 10px;
             .touxianga{
                display: flex;
                .touaa{
                    width: 30px;
                    height: 30px;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                .touba{
                    flex: 1;
                    margin-bottom: 15px;
                    border: 0;
                    margin-left: 10px;
                    p{
                        line-height: 18px;
                        font-size: 14px;
                        span{
                            display: inline-block;
                            line-height: 18px;
                            height: 18px;
                            float: right;
                            margin-right: 5px;
                            color: #666;
                        }
                    }
                    .tupians{
                        display: flex;
                        flex-wrap: wrap;
                        div{
                            flex: 0 0 33.3333%;
                            padding: 5px;
                            img{
                                width: 100%;
                                height: 96px;
                            }
                        }
                    }
                }
                }
        }
</style>
